<!doctype html>
<html onselecteStart="return false">
	<head>
		<meta charset="utf-8">
		<title>旋转的照片</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background:black;
			}
			img{
            	vertical-align: middle;
            }
			#warp{
			 position:relative;
	             perspective:1000px;
	             top:100px;
                  }
            #warp #sence{
            	position:absolute;
            	width:1000px;
            	height:1200px;
            	background:;
            	left:500px;
            	transform:rotateX(-20deg) rotateY(0deg);
            	transform-style: preserve-3d;
                  transform-origin:200px 200px 0px;
            }
            #sence ul li{
            	position:absolute;
            	border-radius:20px;
            	box-shadow:0 0 10px #9f9;
            	transition:5s;
                  list-style:none;
            }
            #sence ul li img{
            	-webkit-box-reflect:below 5px 
            	-webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 100%);
            }
            #sence #bg{
            	position:absolute;
            	width:500px;
            	height:500px;
            	left:0px;
            	top:38px;
            	margin-left:-100px;
            	margin-top:0px;
            	border-radius:50%;
            	background-image:-webkit-radial-gradient(center,250px 250px,rgba(214,23,244,0.8),rgba(0,0,0,0));
            	-transform: rotateX(81deg) translateZ(0px);
            }
		</style>
	</head>
	<body>
		<div id="warp">
		    <div id="sence">
				<ul>
					<li><img src="images/z1.png"></li>
					<li><img src="images/z2.png"></li>
					<li><img src="images/z3.png"></li>
					<li><img src="images/z4.png"></li>
					<li><img src="images/z5.png"></li>
					<li><img src="images/z6.png"></li>
					<li><img src="images/z7.png"></li>
					<li><img src="images/z8.png"></li>
					<li><img src="images/z9.png"></li>
					<li><img src="images/z10.png"></li>
					<li><img src="images/z11.png"></li>
					<li><img src="images/z12.png"></li>
				</ul>
			<div id="bg"></div>
		</div>
		<script>
			var sen=document.getElementById("sence");
			var oLi=sen.getElementsByTagName("li");
			var len=oLi.length;
			var Deg=(360/len);
			function Rotate(){
				for(var i=0;i<len;i++){
					oLi[i].style.transform="rotateY("+(i*Deg)+"deg) translateZ(400px)";
				}
			}
			Rotate();
                  function drag(){
                        var ev=event||window.event;
                        document.onmousedown=function(ev){
                              var lastX=ev.clientX;
                              var lastY=ev.clientY;
                              document.onmousemove=function(ev){
                                    var nowX=ev.clientX;
                                    var nowY=ev.clientY;
                                    var D_valueX=nowX-lastX;
                                    var D_valueY=nowY-lastY;
                                    var roY=0,roX=0;
                                     roY+=D_valueX*10;
                                     roX-=D_valueY*10;
                                     console.log(roY,roX);
                                    sen.style.transform="rotateX("+roY+"deg) rotateY("+roX+"deg) translateX(0px)";
                                    lastX=nowX;
                                    lastY=nowY;
                              }
                        }
                  }
                  drag();
		</script>
    </body>
</html>